<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务查询统计 - 大模型统一赋能平台</title>
    <style>
        :root {
            --brand-green: #009966;
            --green-light: #e6f5f0;
            --text-primary: #333333;
            --text-secondary: #606266;
            --bg-light: #F5F7FA;
            --border-color: #E4E7ED;
            --header-bg: #FFFFFF;
            --white: #FFFFFF;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --blue: #409EFF;
            --orange: #E6A23C;
        }
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            background-color: var(--bg-light);
            color: var(--text-primary);
            font-size: 14px;
        }
        .app-container {
            display: grid;
            grid-template-columns: 220px 1fr;
            grid-template-rows: 60px 1fr;
            height: 100vh;
            grid-template-areas:
                "header header"
                "sider content";
        }
        .app-header {
            grid-area: header;
            background-color: var(--header-bg);
            display: flex;
            align-items: center;
            padding: 0 24px;
            border-bottom: 1px solid var(--border-color);
            justify-content: space-between;
        }
        .logo-area {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .logo-area .logo {
            color: var(--brand-green);
        }
        .logo-area .system-name {
            font-size: 18px;
            font-weight: 600;
        }
        .header-actions {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .header-actions .icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-secondary);
            padding: 4px;
        }
        .user-profile {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .user-profile .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--green-light);
            color: var(--brand-green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .app-sider {
            grid-area: sider;
            background-color: var(--header-bg);
            padding: 16px 0;
            border-right: 1px solid var(--border-color);
        }
        .menu-group {
            padding: 0 16px;
            margin-top: 16px;
        }
        .menu-group-title {
            font-size: 12px;
            color: #999;
            padding: 0 8px;
            margin-bottom: 8px;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-radius: 6px;
            text-decoration: none;
            color: var(--text-secondary);
            margin-bottom: 4px;
            transition: background-color 0.2s, color 0.2s;
        }
        .menu-item svg {
            margin-right: 12px;
        }
        .menu-item:hover {
            background-color: var(--bg-light);
        }
        .menu-item.active {
            background-color: var(--green-light);
            color: var(--brand-green);
            font-weight: 600;
        }
        .menu-item.active svg {
            color: var(--brand-green);
        }
        .app-content {
            grid-area: content;
            padding: 24px;
            overflow-y: auto;
        }
        .breadcrumb {
            color: var(--text-secondary);
            margin-bottom: 16px;
        }
        .page-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 24px;
        }
        .card {
            background-color: var(--white);
            border-radius: 8px;
            padding: 24px;
            box-shadow: var(--shadow);
            margin-bottom: 24px;
        }
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-bottom: 24px;
        }
        .kpi-card {
            background-color: var(--white);
            border-radius: 8px;
            padding: 24px;
            box-shadow: var(--shadow);
        }
        .kpi-card .value {
            font-size: 32px;
            font-weight: bold;
            color: var(--brand-green);
        }
        .kpi-card .title {
            color: var(--text-secondary);
            margin-top: 8px;
        }
        .charts-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }
        .chart-container .chart-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
        }
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        .data-table th, .data-table td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        .data-table th {
            background-color: var(--bg-light);
            font-weight: 600;
            color: var(--text-secondary);
        }
        svg.icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.125em;
            fill: currentColor;
        }
        .filter-bar {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 24px;
        }
        .input-group {
            display: flex;
            align-items: center;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 0 8px;
            background-color: var(--white);
        }
        .input-group input, .input-group select {
            border: none;
            outline: none;
            padding: 8px;
            background: transparent;
        }
        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background-color: var(--white);
            cursor: pointer;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-primary {
            background-color: var(--brand-green);
            color: var(--white);
            border-color: var(--brand-green);
        }
    </style>
</head>
<body>
    <!-- SVG Icon Definitions (same as previous page) -->
    <svg width="0" height="0" style="position:absolute">
      <symbol id="icon-logo" viewBox="0 0 1024 1024"><path d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m243.2 688c-32 32-73.6 44.8-121.6 44.8H390.4c-48 0-89.6-12.8-121.6-44.8-32-32-44.8-73.6-44.8-121.6V390.4c0-48 12.8-89.6 44.8-121.6 32-32 73.6-44.8 121.6-44.8h288c48 0 89.6 12.8 121.6 44.8 32 32 44.8 73.6 44.8 121.6v176c0 48-12.8 89.6-44.8 121.6zM691.2 428.8H505.6v172.8h185.6c12.8 0 22.4-9.6 22.4-22.4V451.2c0-12.8-9.6-22.4-22.4-22.4z m-320-38.4h140.8v249.6H371.2c-12.8 0-22.4-9.6-22.4-22.4V412.8c0-12.8 9.6-22.4 22.4-22.4z"></path></symbol>
      <symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M909.6 854.1L646.4 590.8C686.8 530.1 712 457.7 712 378.5 712 170.5 541.5 0 333.5 0S-45 170.5-45 378.5s170.5 378.5 378.5 378.5c79.2 0 151.6-25.2 212.3-65.6l263.2 263.2c12.4 12.4 32.8 12.4 45.2 0s12.4-32.8 0-45.2zM333.5 641c-145.4 0-262.5-117.1-262.5-262.5S188.1 116 333.5 116s262.5 117.1 262.5 262.5S478.9 641 333.5 641z"></path></symbol>
      <symbol id="icon-bell" viewBox="0 0 1024 1024"><path d="M512 896a128 128 0 0 0 128-128H384a128 128 0 0 0 128 128z m320-256V384c0-159.1-128.9-288-288-288S256 224.9 256 384v256l-96 96v32h768v-32l-96-96z"></path></symbol>
      <symbol id="icon-question" viewBox="0 0 1024 1024"><path d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m0 896c-212.1 0-384-171.9-384-384S299.9 128 512 128s384 171.9 384 384-171.9 384-384 384z m0-256a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m0-512c-96.5 0-175.3 78.8-175.3 175.3 0 53.7 24.3 101.5 63.8 132.2 24 18.7 39.8 45.3 39.8 74.7v50.3h143.4v-50.3c0-29.4 15.8-56 39.8-74.7 39.5-30.7 63.8-78.5 63.8-132.2C687.3 206.8 608.5 128 512 128z"></path></symbol>
      <symbol id="icon-dashboard" viewBox="0 0 1024 1024"><path d="M160 896h256V576H160v320z m0-384h256V128H160v384z m320 384h384V448H480v448z m0-512h384V128H480v256z"></path></symbol>
      <symbol id="icon-users" viewBox="0 0 1024 1024"><path d="M720 512H928c-48.4-158.3-191.2-277.5-364.5-296.2L720 512zM304 512h156.4L304 215.8C131.2 234.5 1.6 353.7 0 512h96c13.3 0 24 10.7 24 24v224c0 13.3-10.7 24-24 24H0c1.6 158.3 131.2 277.5 304 296.2V512zM512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m24 784V536c0-13.3 10.7-24 24-24h299.9c12.2 0 23.1-9.1 24-21.2 1.3-17.9-1.8-35.9-8.4-52.9-18.1-46.7-48.9-87.3-89.8-118.2-39.7-29.9-86.4-47.5-136.2-50.7-14.8-.9-27.5-13.4-27.5-28.3V192c0-13.3-10.7-24-24-24s-24 10.7-24 24v592c0 13.3 10.7 24 24 24z"></path></symbol>
      <symbol id="icon-role" viewBox="0 0 1024 1024"><path d="M888 72H136c-35.3 0-64 28.7-64 64v784c0 35.3 28.7 64 64 64h752c35.3 0 64-28.7 64-64V136c0-35.3-28.7-64-64-64zM448 840H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32zm0-160H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32zm336-320H608c-17.7 0-32-14.3-32-32s14.3-32 32-32h176c17.7 0 32 14.3 32 32s-14.3 32-32 32zm0-160H608c-17.7 0-32-14.3-32-32s14.3-32 32-32h176c17.7 0 32 14.3 32 32s-14.3 32-32 32zM448 360H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32z"></path></symbol>
      <symbol id="icon-code" viewBox="0 0 1024 1024"><path d="M300.3 320.1c-16.2 0-32.2 6.2-44.4 18.4L98.7 505.7c-24.5 24.5-24.5 64.3 0 88.8l157.2 167.2c12.2 12.2 28.2 18.4 44.4 18.4s32.2-6.2 44.4-18.4c24.5-24.5 24.5-64.3 0-88.8L211.5 550.1l133.2-121.2c24.5-24.5 24.5-64.3 0-88.8zM723.7 320.1c-24.5-24.5-64.3-24.5-88.8 0L428.5 526.5c-24.5 24.5-24.5 64.3 0 88.8s64.3 24.5 88.8 0L723.7 409c24.5-24.5 24.5-64.3 0-88.9zM925.3 487.3L768.1 320.1c-24.5-24.5-64.3-24.5-88.8 0s-24.5 64.3 0 88.8l133.2 121.2-133.2 121.2c-24.5 24.5-24.5 64.3 0 88.8 12.2 12.2 28.2 18.4 44.4 18.4s32.2-6.2 44.4-18.4l157.2-167.2c24.5-24.5 24.5-64.3 0-88.8z"></path></symbol>
      <symbol id="icon-qa" viewBox="0 0 1024 1024"><path d="M725.333 554.667H682.667c-23.467 0-42.667-19.2-42.667-42.667V384c0-23.467 19.2-42.667 42.667-42.667h42.666c23.467 0 42.667 19.2 42.667 42.667v128c0 23.467-19.2 42.667-42.667 42.667z m-213.333 0H469.333c-23.467 0-42.666-19.2-42.666-42.667V384c0-23.467 19.2-42.667 42.666-42.667h42.667c23.467 0 42.667 19.2 42.667 42.667v128c0 23.467-19.2 42.667-42.667 42.667z m-213.333 0H256c-23.467 0-42.667-19.2-42.667-42.667V384c0-23.467 19.2-42.667 42.667-42.667h42.667c23.467 0 42.666 19.2 42.666 42.667v128c0 23.467-19.2 42.667-42.666 42.667zM896 170.667H128C81.92 170.667 42.667 210.347 42.667 256v384c0 45.653 39.253 85.333 85.333 85.333h170.667L460.8 857.173c9.387 11.093 23.893 17.493 39.253 17.493h24.107c15.36 0 29.867-6.4 39.253-17.493L725.333 725.333H896c45.653 0 85.333-39.253 85.333-85.333V256c0-45.653-39.68-85.333-85.333-85.333z"></path></symbol>
    </svg>

    <div class="app-container">
        <header class="app-header">
            <div class="logo-area">
                <svg class="icon logo" width="32" height="32"><use xlink:href="#icon-logo"></use></svg>
                <span class="system-name">大模型统一赋能平台</span>
            </div>
            <div class="header-actions">
                 <button class="icon-btn"><svg class="icon" width="20" height="20"><use xlink:href="#icon-search"></use></svg></button>
                <button class="icon-btn"><svg class="icon" width="20" height="20"><use xlink:href="#icon-bell"></use></svg></button>
                <button class="icon-btn"><svg class="icon" width="20" height="20"><use xlink:href="#icon-question"></use></svg></button>
                <div class="user-profile">
                    <div class="avatar">王</div>
                    <span>王经理</span>
                </div>
            </div>
        </header>

        <aside class="app-sider">
            <nav>
                <div class="menu-group">
                    <a href="#" class="menu-item active">
                        <svg class="icon" width="18" height="18"><use xlink:href="#icon-dashboard"></use></svg>
                        业务查询统计
                    </a>
                </div>
                <div class="menu-group">
                    <div class="menu-group-title">系统管理</div>
                    <a href="#" class="menu-item">
                        <svg class="icon" width="18" height="18"><use xlink:href="#icon-users"></use></svg>
                        用户及权限管理
                    </a>
                    <a href="#" class="menu-item">
                        <svg class="icon" width="18" height="18"><use xlink:href="#icon-role"></use></svg>
                        角色管理
                    </a>
                </div>
                <div class="menu-group">
                    <div class="menu-group-title">业务功能</div>
                    <a href="#" class="menu-item">
                        <svg class="icon" width="18" height="18"><use xlink:href="#icon-code"></use></svg>
                        代码生成助手
                    </a>
                    <a href="#" class="menu-item">
                        <svg class="icon" width="18" height="18"><use xlink:href="#icon-qa"></use></svg>
                        智能问答助手
                    </a>
                </div>
            </nav>
        </aside>

        <main class="app-content">
            <div class="breadcrumb">业务功能 / 业务查询统计</div>
            <h1 class="page-title">业务查询统计</h1>

            <div class="filter-bar">
                 <div class="input-group">
                    <input type="date" value="2024-05-01">
                    <span style="margin: 0 8px;">-</span>
                    <input type="date" value="2024-05-31">
                </div>
                <div class="input-group">
                    <select>
                        <option value="">所有机构</option>
                        <option value="">总行科技部</option>
                        <option value="">北京分行</option>
                    </select>
                </div>
                <div class="input-group">
                    <select>
                        <option value="">所有用户</option>
                    </select>
                </div>
                <button class="btn btn-primary">查询</button>
            </div>
            
            <div class="dashboard-grid">
                <div class="kpi-card">
                    <div class="value">1,280,456</div>
                    <div class="title">总调用次数</div>
                </div>
                <div class="kpi-card">
                    <div class="value">896,319</div>
                    <div class="title">代码生成次数</div>
                </div>
                <div class="kpi-card">
                    <div class="value">384,137</div>
                    <div class="title">智能问答次数</div>
                </div>
                 <div class="kpi-card">
                    <div class="value">482</div>
                    <div class="title">当前在线用户</div>
                </div>
            </div>

            <div class="charts-grid">
                <div class="card chart-container">
                    <h3 class="chart-title">功能调用趋势 (近30天)</h3>
                    <svg width="100%" height="300" viewBox="0 0 800 300">
                        <!-- Axes -->
                        <line x1="50" y1="250" x2="780" y2="250" stroke="#ccc" />
                        <line x1="50" y1="250" x2="50" y2="20" stroke="#ccc" />
                        <!-- Y-axis labels -->
                        <text x="40" y="250" text-anchor="end" font-size="12" fill="#999">0</text>
                        <text x="40" y="140" text-anchor="end" font-size="12" fill="#999">50k</text>
                        <text x="40" y="30" text-anchor="end" font-size="12" fill="#999">100k</text>
                        <!-- X-axis labels -->
                        <text x="60" y="270" text-anchor="middle" font-size="12" fill="#999">05-01</text>
                        <text x="415" y="270" text-anchor="middle" font-size="12" fill="#999">05-15</text>
                        <text x="770" y="270" text-anchor="middle" font-size="12" fill="#999">05-30</text>
                        <!-- Data path -->
                        <polyline points="60,230 100,200 140,210 180,180 220,150 260,160 300,120 340,100 380,110 420,80 460,90 500,70 540,60 580,85 620,100 660,120 700,130 740,110 770,100" fill="none" stroke="var(--brand-green)" stroke-width="2"/>
                    </svg>
                </div>
                <div class="card chart-container">
                     <h3 class="chart-title">功能模块使用分布</h3>
                     <svg width="100%" height="300" viewBox="0 0 300 300">
                         <circle r="75" cx="150" cy="120" fill="transparent" stroke="var(--brand-green)" stroke-width="50" stroke-dasharray="calc(0.7 * 2 * 3.1415 * 75) calc(0.3 * 2 * 3.1415 * 75)"/>
                         <circle r="75" cx="150" cy="120" fill="transparent" stroke="var(--blue)" stroke-width="50" stroke-dasharray="0 calc(0.7 * 2 * 3.1415 * 75) calc(0.3 * 2 * 3.1415 * 75) 0" />
                         <!-- Legend -->
                         <rect x="50" y="220" width="12" height="12" fill="var(--brand-green)"/>
                         <text x="70" y="230" font-size="14">代码生成 (70%)</text>
                         <rect x="50" y="250" width="12" height="12" fill="var(--blue)"/>
                         <text x="70" y="260" font-size="14">智能问答 (30%)</text>
                     </svg>
                </div>
            </div>

            <div class="card">
                <h3 class="chart-title">详细数据</h3>
                <table class="data-table">
                     <thead>
                        <tr>
                            <th>日期</th>
                            <th>机构</th>
                            <th>代码生成次数</th>
                            <th>智能问答次数</th>
                            <th>总计</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>2024-05-30</td><td>总行科技部</td><td>5,230</td><td>2,105</td><td>7,335</td></tr>
                        <tr><td>2024-05-30</td><td>北京分行</td><td>3,110</td><td>1,520</td><td>4,630</td></tr>
                        <tr><td>2024-05-29</td><td>总行科技部</td><td>4,980</td><td>1,980</td><td>6,960</td></tr>
                    </tbody>
                </table>
            </div>

        </main>
    </div>
</body>
</html>
